<div class="bar-left {{barBack}}" style="{{headerAnimationDelay}}">
	<div class="bar-back material-icon button button2 hover-text" hover-text="{{language.global.goBack}}" onclick="dom.history.goBack()" style="{{headerAnimationDelay}}">arrow_back</div>
	<div class="bar-title title-small" style="max-width: calc(100% - ({{#if comicsDeep2}}685px{{else}}561px{{/if}} + 68px));">
		{{#if headerTitlePath}}
			{{#each headerTitlePath}}
				<span class="bar-title-a" onclick="{{#if path}}dom.loadIndexPage(true, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' path}}', false, false, '{{chain 'escapeBackSlash' 'escapeQuotesSimples' mainPath}}', false, true){{else}}dom.goStartPath(){{/if}}">{{name}}</span>
				{{#unless last}} <i class="material-icon navegation">chevron_right</i> {{/unless}}
			{{/each}}
		{{else}}
			{{#if headerTitle}}
				{{headerTitle}}
			{{else}}
				{{indexHeaderTitle}}
			{{/if}}
		{{/if}}
	</div>
</div>
<div class="bar-right-buttons">
	<div>
		<div class="material-icon button button1 button-sort hover-text" hover-text="{{language.global.sort.main}}" onclick="events.activeMenu('#index-sort', '.bar-right-buttons .button-sort', 'right');">sort</div>
		<div class="material-icon button button1 button-view hover-text" hover-text="{{language.global.view.main}}" onclick="events.activeMenu('#index-view', '.bar-right-buttons .button-view', 'right');">
			{{#if comicsIndex}}
				{{#if sortAndView}}
					{{#compare sortAndView.view '==' 'module'}}view_module{{else}}view_list{{/compare}}
				{{else}}
					{{#compare config.viewIndex '==' 'module'}}view_module{{else}}view_list{{/compare}}
				{{/if}}
			{{else}}
				{{#compare config.view '==' 'module'}}view_module{{else}}view_list{{/compare}}
			{{/if}}
		</div>
		<div class="bar-buttons-separator"></div>
		<div class="material-icon button button2 hover-text" hover-text="{{language.global.reload}}" onclick="dom.reload();">refresh</div>
		<div class="material-icon button button2 button-search hover-text" hover-text="{{language.global.filterCurrentPage}}" onclick="dom.search.showHide(true);">filter_list</div>
		<div class="material-icon button button2 button-search hover-text" hover-text="{{language.global.search}}" onclick="dom.search.showHide();">search</div>
		<div class="bar-buttons-separator"></div>
		<div class="material-icon button button2 button-random hover-text" hover-text="{{language.global.pickAtRandom}}" onclick="dom.pickAtRandom();">shuffle</div>
		<div class="bar-buttons-separator"></div>
		<div class="material-icon button button1 button-labels hover-text{{#if page.filter.hasLabels}} fill{{/if}}" hover-text="{{language.global.labels}}" onclick="dom.labels.loadLabels(); events.activeMenu('#index-labels', '.bar-right-buttons .button-labels', 'right');">label</div>
		<div class="material-icon button button2 button-favorite hover-text{{#if page.favorites}} disable-pointer{{/if}}{{#if page.filter.favorites}} fill{{/if}}" hover-text="{{language.global.contextMenu.favorite}}" onclick="dom.labels.filterFavorite();">favorite</div>
		{{#if page.labelOrFavorites}}
		<div class="material-icon button button2 button-only-root hover-text{{#if page.filter.onlyRoot}} fill{{/if}}" hover-text="{{language.global.filter.onlyRoot}}" onclick="dom.labels.filterOnlyRoot();">drive_folder_upload</div>
		{{/if}}
		{{#unless comicsIndex}}
		{{#if comicsDeep2}}
		<div class="bar-buttons-separator"></div>
		<div class="material-icon button button2 button-next-comic hover-text disable-pointer" hover-text="{{language.reading.nextChapter}}" onclick="dom.goNextComic();">navigate_next</div>
		<div class="material-icon button button2 button-prev-comic hover-text disable-pointer" hover-text="{{language.reading.prevChapter}}" onclick="dom.goPrevComic();">navigate_before</div>
		{{/if}}
		{{/unless}}
		<div class="bar-buttons-separator"></div>
		<div class="material-icon button button2 button-night-mode hover-text" hover-text="{{language.global.nightMode}}" onclick="dom.nightMode();">{{#if config.nightMode}}dark_mode{{else}}light_mode{{/if}}</div>
	</div>
</div>